<!--
 * @Author: Lakeiedward
 * @Date: 2021-04-26 09:45:12
 * @LastEditTime: 2021-04-26 12:38:37
 * @FilePath: \echarts\src\views\risk\riskEvent.vue
-->
<template>
  <div class="item flex j-c">
    <div class="main"></div>
  </div>
</template>
<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
  props: {},
  data() {
    return {
      country: [],
      countryValue: [],
      income: [],
    };
  },
  watch: {},
  created() {},
  async mounted() {
    let {
      data: { data },
    } = await axios.get("json/bar1.json");

    this.country = data.map((r) => r.name);
    this.countryValue = data.map((r) => r.value);

    this.country = this.country.reverse();
    this.countryValue = this.countryValue.reverse();

    this.init();
  },
  methods: {
    init() {
      let myEhcart = echarts.init(document.querySelector(".main"));
      var myColor = [
        "#F8BFAD",
        "#F8BFAD",
        "#F8BFAD",
        "#F8BFAD",
        "#F8BFAD",
        "#F8BFAD",
        "#F8BFAD",
        "#F8BFAD",
        "#f76060",
        "#f76060",
        "#f76060",
        "#aa1309",
        "#f76060",
      ];
      myColor = myColor.reverse();
      let option = {
        title: {
          text: "世界主要国家人均购买疫苗数量",
          top: "3%",
          left: "center",
          textStyle: {
            fontSize: 26,
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "value",
          max: 9,
          boundaryGap: [0, 0.01],

          splitNumber: 9,
          axisLabel: {
            formatter: (par) => {
              par = par.toFixed(2);
              return par;
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: this.country,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            fontWeight: 700,
          },
          axisTick: {
            show: false,
          },
        },
        // visualMap: {
        //   min: 0,
        //   max: 1000,
        //   right: 26,
        //   bottom: 80,
        //   pieces: [
        //     {
        //       gt: 100,
        //       label: "高收入",
        //       color: "#F8BFAD",
        //     },
        //     {
        //       gte: 10,
        //       lte: 100,
        //       label: "中上收入",
        //       color: "#f76060",
        //     },
        //     {
        //       gte: 1,
        //       lt: 10,
        //       label: "低中等收入",
        //       color: "#aa1309",
        //     },
        //     {
        //       gt: 0,
        //       lt: 1,
        //       label: "低收入",
        //       color: "rgb(85, 18, 7)",
        //     },
        //   ],
        // },
        series: [
          {
            name: "高收入",
            type: "bar",

            barWidth: "40%",
            data: this.countryValue,
            itemStyle: {
              color: (params) => {
                console.log(myColor.length);
                return myColor[params.dataIndex];
              },
            },
            label: {
              show: true,
              position: "right",
              formatter(par) {
                par.value = par.value.toFixed(2);
                return par.value;
              },
            },
          },
        ],
      };
      myEhcart.setOption(option);
      // 设置图表的自动适应
      window.addEventListener("resize", () => {
        myEhcart.resize();
      });
    },
  },
};
</script>
<style scoped lang="scss">
.main {
  width: 1000px;
  height: 800px;
  margin: auto;
  color: #f8bfad;
  color: #b94935;
  color: #ee6f59;
  color: #f76060;
  color: #aa1309;
  color: rgb(85, 18, 7);
}
.item {
  height: 100%;
}
</style>
